<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>蓝星图书-后台管理</title>
  <!-- 图标 -->
  <link rel="shortcut icon" href="https://static.websiteonline.cn/website/template/default/images/favicon.ico"
    type="image/x-icon" />
  <link rel="Bookmark" href="https://static.websiteonline.cn/website/template/default/images/favicon.ico" />

  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/layui/css/layui.css">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- Layui -->
  <script src="/layui/layui.js"></script>
  <script src="/js/backstage/home.js"></script>
  <script>
    layui.use(['laypage', 'laydate'], function () {
      var laypage = layui.laypage;
      var laydate = layui.laydate;
      //执行一个laypage实例
      laypage.render({
        elem: 'pageBook', //注意，这里的 test1 是 ID，不用加 # 号
        count: 50, //数据总数，从服务端得到
        limit: 10, // 每页显示条数
        //layout: ['limit'], // 每页条数下拉框 结合limits使用
        // limits: [10, 20, 30, 40, 50] 
      });
      //执行一个laydate实例
      laydate.render({
        elem: '#idate' //指定元素
      });
    });
  </script>

</head>

<body>
  <!-- 顶部导航 -->
  <script src="/js/backstage/header.js"></script>
  <!-- 内容 -->
  <div class="layui-col-md12">
    <!-- 左侧导航 -->
    <script src="/js/backstage/left_nav.js"></script>
    <!-- 对应导航内容 -->
    <div class="layui-col-md10" style="margin-left: 300px;">
      <button type="button" onclick="saveBook()" class="layui-btn" style="margin-top: 4%;">新增</button>
      <table class="layui-table">
        <colgroup>
          <col width="150">
          <col width="200">
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>ID</th>
            <th>图片</th>
            <th>名称</th>
            <th>作者</th>
            <th>入库时间</th>
            <th>入库价格</th>
            <th>市场价</th>
            <th>平台价</th>
            <th>出版社</th>
            <th>出版日期</th>
            <th>剩余量</th>
            <th>售出量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>
              <img src="/img/29216523-1_m_27.jpg" width="50px;" height="50px;" />
            </td>
            <td>希望之线</td>
            <td>东野圭吾</td>
            <td>2016-11-29 15:00:02</td>
            <td>25.00</td>
            <td>45.00</td>
            <td>36.00</td>
            <td>清华出版</td>
            <td>2016-11-29</td>
            <td>102</td>
            <td>305</td>
            <td>
              <button type="button" onclick="window.location.href='update_book.html' " class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe642;</i>
              </button>
              <button type="button" onclick="deleteBook(1)" class="layui-btn layui-btn-sm layui-btn-danger">
                <i class="layui-icon">&#xe640;</i>
              </button>
            </td>
          </tr>
          <tr>
            <td>1</td>
            <td>
              <img src="/img/29216523-1_m_27.jpg" width="50px;" height="50px;" />
            </td>
            <td>希望之线</td>
            <td>东野圭吾</td>
            <td>2016-11-29 15:00:02</td>
            <td>25.00</td>
            <td>45.00</td>
            <td>36.00</td>
            <td>清华出版</td>
            <td>2016-11-29</td>
            <td>102</td>
            <td>305</td>
            <td>
              <button type="button" onclick="window.location.href='update_book.html' " class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe642;</i>
              </button>
              <button type="button" onclick="deleteBook(1)" class="layui-btn layui-btn-sm layui-btn-danger">
                <i class="layui-icon">&#xe640;</i>
              </button>
            </td>
          </tr>
          <tr>
            <td>1</td>
            <td>
              <img src="/img/29216523-1_m_27.jpg" width="50px;" height="50px;" />
            </td>
            <td>希望之线</td>
            <td>东野圭吾</td>
            <td>2016-11-29 15:00:02</td>
            <td>25.00</td>
            <td>45.00</td>
            <td>36.00</td>
            <td>清华出版</td>
            <td>2016-11-29</td>
            <td>102</td>
            <td>305</td>
            <td>
              <button type="button" onclick="window.location.href='update_book.html' " class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe642;</i>
              </button>
              <button type="button" onclick="deleteBook(1)" class="layui-btn layui-btn-sm layui-btn-danger">
                <i class="layui-icon">&#xe640;</i>
              </button>
            </td>
          </tr>
          <tr>
            <td>1</td>
            <td>
              <img src="/img/29216523-1_m_27.jpg" width="50px;" height="50px;" />
            </td>
            <td>希望之线</td>
            <td>东野圭吾</td>
            <td>2016-11-29 15:00:02</td>
            <td>25.00</td>
            <td>45.00</td>
            <td>36.00</td>
            <td>清华出版</td>
            <td>2016-11-29</td>
            <td>102</td>
            <td>305</td>
            <td>
              <button type="button" onclick="window.location.href='update_book.html' " class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe642;</i>
              </button>
              <button type="button" onclick="deleteBook(1)" class="layui-btn layui-btn-sm layui-btn-danger">
                <i class="layui-icon">&#xe640;</i>
              </button>
            </td>
          </tr>
          <tr>
            <td>1</td>
            <td>
              <img src="/img/29216523-1_m_27.jpg" width="50px;" height="50px;" />
            </td>
            <td>希望之线</td>
            <td>东野圭吾</td>
            <td>2016-11-29 15:00:02</td>
            <td>25.00</td>
            <td>45.00</td>
            <td>36.00</td>
            <td>清华出版</td>
            <td>2016-11-29</td>
            <td>102</td>
            <td>305</td>
            <td>
              <button type="button" onclick="window.location.href='update_book.html' " class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe642;</i>
              </button>
              <button type="button" onclick="deleteBook(1)" class="layui-btn layui-btn-sm layui-btn-danger">
                <i class="layui-icon">&#xe640;</i>
              </button>
            </td>
          </tr>
          <tr>
            <td>1</td>
            <td>
              <img src="/img/29216523-1_m_27.jpg" width="50px;" height="50px;" />
            </td>
            <td>希望之线</td>
            <td>东野圭吾</td>
            <td>2016-11-29 15:00:02</td>
            <td>25.00</td>
            <td>45.00</td>
            <td>36.00</td>
            <td>清华出版</td>
            <td>2016-11-29</td>
            <td>102</td>
            <td>305</td>
            <td>
              <button type="button" onclick="window.location.href='update_book.html' " class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe642;</i>
              </button>
              <button type="button" onclick="deleteBook(1)" class="layui-btn layui-btn-sm layui-btn-danger">
                <i class="layui-icon">&#xe640;</i>
              </button>
            </td>
          </tr>

        </tbody>
      </table>
      <!-- 分页 -->
      <br />
      <div id="pageBook"></div>
    </div>
  </div>

  <!-- 新增图书窗口 与查看共用一个 -->
  <div style="display: none;" id="saveBook">
    <form action="/index" class="layui-form" method="POST">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入图书名称" autocomplete="off"
        class="layui-input">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
        class="layui-input">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入副标题" autocomplete="off"
        class="layui-input">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入作者" autocomplete="off"
        class="layui-input">
        <input type="text" name="title" required lay-verify="required" placeholder="请输入出版社" autocomplete="off"
        class="layui-input">
      <input type="text" name="title" id="idate" required lay-verify="required" placeholder="请输入出版日期" autocomplete="off"
        class="layui-input ">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入价格" autocomplete="off"
        class="layui-input">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入市场价" autocomplete="off"
        class="layui-input">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入平台价" autocomplete="off"
        class="layui-input">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入入库数量" autocomplete="off"
        class="layui-input">
      <!-- 图书类别 -->
      <div class="layui-form-item">
        <label class="layui-form-label" style="padding-right: 0px;padding-left: 0px;">类别选择</label>
        <div class="layui-input-block">
          <select name="city" lay-verify="required">
            <option value=""></option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
            <option value="4">杭州</option>
          </select>
        </div>
      </div>

      <!-- 供应商 -->
      <div class="layui-form-item">
        <label class="layui-form-label" style="padding-right: 0px;padding-left: 0px;">供应商选择</label>
        <div class="layui-input-block">
          <select name="city" lay-verify="required">
            <option value=""></option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
            <option value="4">杭州</option>
          </select>
        </div>
      </div>
      <div>
        <!-- 图片上传 -->
        <button type="button" class="layui-btn" id="test1">
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <!-- 图书详情图片上传 -->
        <button type="button" class="layui-btn" id="test2">
          <i class="layui-icon">&#xe67c;</i>上传详情图片
        </button>
      </div>
      <script>
        layui.use('upload', function () {
          var upload = layui.upload;

          //执行实例
          var uploadInst = upload.render({
            elem: '#test1' //绑定元素
              ,
            url: '/upload/' //上传接口
              ,
            done: function (res) {
              //上传完毕回调
            },
            error: function () {
              //请求异常回调
            }
          });
          // 上传详情图片
          var uploadInst = upload.render({
            elem: '#test2' //绑定元素
              ,
            url: '/upload/' //上传接口
              ,
            done: function (res) {
              //上传完毕回调
            },
            error: function () {
              //请求异常回调
            }
          });
        });
      </script>
      <button type="submit" class="layui-btn layui-btn-fluid">新增</button>
      <br />
      <button type="reset" class="layui-btn layui-btn-danger layui-btn-fluid">重置</button>
    </form>
  </div>

  <!-- 查看或修改图书窗口 修改请求路径 -->
  <div style="display: none;" id="updateBook">
    <form action="/index" class="layui-form" method="POST">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入图书名称" autocomplete="off"
        class="layui-input">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
        class="layui-input">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入副标题" autocomplete="off"
        class="layui-input">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入作者" autocomplete="off"
        class="layui-input">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入价格" autocomplete="off"
        class="layui-input">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入出版社" autocomplete="off"
        class="layui-input">
      <input type="date" name="title" required lay-verify="required" placeholder="请输入出版日期" autocomplete="off"
        class="layui-input">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入市场价" autocomplete="off"
        class="layui-input">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入平台价" autocomplete="off"
        class="layui-input">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入入库数量" autocomplete="off"
        class="layui-input">
      <!-- 图书类别 -->
      <div class="layui-form-item">
        <label class="layui-form-label" style="padding-right: 0px;padding-left: 0px;">类别选择</label>
        <div class="layui-input-block">
          <select name="city" lay-verify="required">
            <option value=""></option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
            <option value="4">杭州</option>
          </select>
        </div>
      </div>

      <!-- 供应商 -->
      <div class="layui-form-item">
        <label class="layui-form-label" style="padding-right: 0px;padding-left: 0px;">供应商选择</label>
        <div class="layui-input-block">
          <select name="city" lay-verify="required">
            <option value=""></option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
            <option value="4">杭州</option>
          </select>
        </div>
      </div>
      <div>
        <!-- 图片上传 -->
        <button type="button" class="layui-btn" id="test1">
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <!-- 图书详情图片上传 -->
        <button type="button" class="layui-btn" id="test2">
          <i class="layui-icon">&#xe67c;</i>上传详情图片
        </button>
      </div>
      <script>
        layui.use('upload', function () {
          var upload = layui.upload;

          //执行实例
          var uploadInst = upload.render({
            elem: '#test1' //绑定元素
              ,
            url: '/upload/' //上传接口
              ,
            done: function (res) {
              //上传完毕回调
            },
            error: function () {
              //请求异常回调
            }
          });
          // 上传详情图片
          var uploadInst = upload.render({
            elem: '#test2' //绑定元素
              ,
            url: '/upload/' //上传接口
              ,
            done: function (res) {
              //上传完毕回调
            },
            error: function () {
              //请求异常回调
            }
          });
        });
      </script>
      <button type="submit" class="layui-btn layui-btn-fluid">修改</button>
      <br />
      <button type="reset" class="layui-btn layui-btn-danger layui-btn-fluid">重置</button>
    </form>
  </div>


</body>

</html>